Multi select (dropdown)

Offers a searchable and scrollable dropdown that allows users to select multiple values.

Examples

Usage

The multi-select component offers a customisable selection box that supports searching. It also enables multi-value selection, allowing users to seamlessly combine typing and scrolling to locate the desired items.

While multi select dropdowns can be powerful tools for user input, approach them with care. This interaction model which combines typing, scrolling, and selection can be confusing, particularly if feedback and validation are unclear. Users may also struggle with discoverability, not realising that multiple selections are possible without clear visual cues.

Thoughtful design and testing are essential to ensure this component enhances rather than hinders the user experience.

Do:

match the select width to the length of the longest option rather than stretching it to other fields' widths
provide clear instructions or labels so users understand they can select multiple items
keep the list of options manageable to avoid overwhelming users
include search to help users find options quickly
test for keyboard and screen reader support
usability test with your users to check this component is usable for them

Avoid:

relying on this component if selections are complex or require detailed context, as multi select can be confusing
using it for very small sets of options where simple checkboxes would be better
overloading it with too many features or large data sets without testing performance and usability
using it as the default multiple selection tool
using mandatory multi select fields without clear guidance

Please correct the errors and try again.

Multi select


            <turas-select-list asp-for="MultiSelect" asp-items="MultiSelects" multiple placeholder="Please select">  </turas-select-list>


            <div class="form-group form-select-list "><label class="control-label   " for="MultiSelect">Multi select</label>
<div class="col">
<select class="form-control turas-select2" multiple="multiple" turas-select2-placeholder="Please select" turas-select2-close-on-select="false" turas-select2-live-search="false" id="MultiSelect" name="MultiSelect"><option value="0">List item 1</option>
<option value="2">List item 2</option>
<option value="3">List item 3</option>
<option value="4">List item 4</option>
<option value="5">List item 5</option>
<option value="6">List item 6</option>
</select>
</div>
<span class="field-validation-valid" data-valmsg-for="MultiSelect" data-valmsg-replace="true"></span>
</div>

Multi select required


            <turas-select-list asp-for="MultiSelectRequired" asp-items="MultiSelectRequireds" multiple placeholder="Please select">  </turas-select-list>


            <div class="form-group form-select-list "><label class="control-label requiredFieldMarker  " for="MultiSelectRequired">Multi select required</label>
<div class="col">
<select class="form-control turas-select2" multiple="multiple" turas-select2-placeholder="Please select" turas-select2-close-on-select="false" turas-select2-live-search="false" data-val="true" data-val-required="The Multi select required field is required." id="MultiSelectRequired" name="MultiSelectRequired"><option value="1">List item 1</option>
<option value="2">List item 2</option>
<option value="3">List item 3</option>
<option value="4">List item 4</option>
<option value="5">List item 5</option>
<option value="6">List item 6</option>
</select>
</div>
<span class="field-validation-valid" data-valmsg-for="MultiSelectRequired" data-valmsg-replace="true"></span>
</div>

Multi select guidance text

I am some guidance text


            <turas-select-list asp-for="MultiSelectWithGuidanceText" asp-items="MultiSelectWithGuidanceTexts" multiple placeholder="Please select" guidance-text="I am some guidance text">  </turas-select-list>


            <div class="form-group form-select-list "><label class="control-label   " for="MultiSelectWithGuidanceText">Multi select guidance text</label>
<div class="form-field-guidance-text">I am some guidance text</div>
<div class="col">
<select class="form-control turas-select2" multiple="multiple" turas-select2-placeholder="Please select" turas-select2-close-on-select="false" turas-select2-live-search="false" id="MultiSelectWithGuidanceText" name="MultiSelectWithGuidanceText"><option value="1">List item 1</option>
<option value="2">List item 2</option>
<option value="3">List item 3</option>
<option value="4">List item 4</option>
<option value="5">List item 5</option>
<option value="6">List item 6</option>
</select>
</div>
<span class="field-validation-valid" data-valmsg-for="MultiSelectWithGuidanceText" data-valmsg-replace="true"></span>
</div>

Multi select guidance text accordion

A paragraph.

List item
List item
List item


                <turas-select-list asp-for="MultiSelectWithGuidanceAccordionText" asp-items="MultiSelectWithGuidanceTextAccodrions"> 
                    
                    <turas-form-guidance collapses>
                        <p>A paragraph.</p>
                        <ul>
                            <li>List item</li>
                            <li>List item</li>
                            <li>List item</li>
                        </ul>
                    </turas-form-guidance>

                </turas-select-list>


                <div class="form-group form-select-list "><label class="control-label   " for="MultiSelectWithGuidanceAccordionText">Multi select guidance text accordion</label>
<div class="turas-form-guidance-collapse">
            <button class="turas-form-guidance-collapse-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-f4fe6341-17b3-4ed0-87b8-4ebe3cf168ee" aria-expanded="false" aria-controls="collapse-f4fe6341-17b3-4ed0-87b8-4ebe3cf168ee"><span class="visually-hidden">Guidance</span></button>              
            <div class="turas-form-guidance-collapse-content collapse" id="collapse-f4fe6341-17b3-4ed0-87b8-4ebe3cf168ee">   
                <div class="form-field-guidance-text"><span class=""></span>
                    
                        <p>A paragraph.</p>
                        <ul>
                            <li>List item</li>
                            <li>List item</li>
                            <li>List item</li>
                        </ul>
                       
                </div>
            </div></div>
<div class="col">
<select class="form-control turas-select2" turas-select2-close-on-select="true" turas-select2-live-search="false" id="MultiSelectWithGuidanceAccordionText" multiple="multiple" name="MultiSelectWithGuidanceAccordionText"><option value="1">List item 1</option>
<option value="2">List item 2</option>
<option value="3">List item 3</option>
<option value="4">List item 4</option>
<option value="5">List item 5</option>
<option value="6">List item 6</option>
</select>
</div>
<span class="field-validation-valid" data-valmsg-for="MultiSelectWithGuidanceAccordionText" data-valmsg-replace="true"></span>
</div>

Multi select with search


            <turas-select-list asp-for="MultiSelectWithSearch" asp-items="MultiSelectWithSearchs" multiple live-search placeholder="Please select">  </turas-select-list>


            <div class="form-group form-select-list "><label class="control-label   " for="MultiSelectWithSearch">Multi select with search</label>
<div class="col">
<select class="form-control turas-select2" multiple="multiple" turas-select2-placeholder="Please select" turas-select2-close-on-select="false" turas-select2-live-search="true" id="MultiSelectWithSearch" name="MultiSelectWithSearch"><option value="1">List item 1</option>
<option value="2">List item 2</option>
<option value="3">List item 3</option>
<option value="4">List item 4</option>
<option value="5">List item 5</option>
<option value="6">List item 6</option>
</select>
</div>
<span class="field-validation-valid" data-valmsg-for="MultiSelectWithSearch" data-valmsg-replace="true"></span>
</div>

Multi select form field width


            <turas-select-list asp-for="MultiSelecttFormFieldWidth" asp-items="MultiSelecttFormFieldWidths" multiple live-search placeholder="Please select" field-column-widths="col-md-4">  </turas-select-list>


            <div class="form-group form-select-list "><label class="control-label   " for="MultiSelecttFormFieldWidth">Multi select form field width</label>
<div class="col-md-4">
<select class="form-control turas-select2" multiple="multiple" turas-select2-placeholder="Please select" turas-select2-close-on-select="false" turas-select2-live-search="true" id="MultiSelecttFormFieldWidth" name="MultiSelecttFormFieldWidth"><option value="1">List item 1</option>
<option value="2">List item 2</option>
<option value="3">List item 3</option>
<option value="4">List item 4</option>
<option value="5">List item 5</option>
<option value="6">List item 6</option>
</select>
</div>
<span class="field-validation-valid" data-valmsg-for="MultiSelecttFormFieldWidth" data-valmsg-replace="true"></span>
</div>

Multi select additional classes


                <turas-select-list asp-for="MultiSelectAdditionalClasses" asp-items="MultiSelecttAdditionalClassess" multiple live-search placeholder="Please select" field-column-widths="col-md-4" additional-classes="mt-">  </turas-select-list>


                <div class="form-group form-select-list mt-"><label class="control-label   " for="MultiSelectAdditionalClasses">Multi select additional classes</label>
<div class="col-md-4">
<select class="form-control turas-select2" multiple="multiple" turas-select2-placeholder="Please select" turas-select2-close-on-select="false" turas-select2-live-search="true" id="MultiSelectAdditionalClasses" name="MultiSelectAdditionalClasses"><option value="1">List item 1</option>
<option value="2">List item 2</option>
<option value="3">List item 3</option>
<option value="4">List item 4</option>
<option value="5">List item 5</option>
<option value="6">List item 6</option>
</select>
</div>
<span class="field-validation-valid" data-valmsg-for="MultiSelectAdditionalClasses" data-valmsg-replace="true"></span>
</div>

Multi select in a row

Multi select in a row


                <div class="row">
                    <div class="col-md-6">
                        <turas-select-list asp-for="MultiSelectInARowOne" asp-items="MultiSelectInARowOnes" multiple live-search placeholder="Please select">  </turas-select-list>
                    </div>
                    <div class="col-md-6">
                        <turas-select-list asp-for="MultiSelectInARowTwo" asp-items="MultiSelectInARowTwos" multiple live-search placeholder="Please select">  </turas-select-list>
                    </div>
                </div>


                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group form-select-list "><label class="control-label   " for="MultiSelectInARowOne">Multi select in a row</label>
<div class="col">
<select class="form-control turas-select2" multiple="multiple" turas-select2-placeholder="Please select" turas-select2-close-on-select="false" turas-select2-live-search="true" id="MultiSelectInARowOne" name="MultiSelectInARowOne"><option value="1">List item 1</option>
<option value="2">List item 2</option>
<option value="3">List item 3</option>
<option value="4">List item 4</option>
<option value="5">List item 5</option>
<option value="6">List item 6</option>
</select>
</div>
<span class="field-validation-valid" data-valmsg-for="MultiSelectInARowOne" data-valmsg-replace="true"></span>
</div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group form-select-list "><label class="control-label   " for="MultiSelectInARowTwo">Multi select in a row</label>
<div class="col">
<select class="form-control turas-select2" multiple="multiple" turas-select2-placeholder="Please select" turas-select2-close-on-select="false" turas-select2-live-search="true" id="MultiSelectInARowTwo" name="MultiSelectInARowTwo"><option value="1">List item 1</option>
<option value="2">List item 2</option>
<option value="3">List item 3</option>
<option value="4">List item 4</option>
<option value="5">List item 5</option>
<option value="6">List item 6</option>
</select>
</div>
<span class="field-validation-valid" data-valmsg-for="MultiSelectInARowTwo" data-valmsg-replace="true"></span>
</div>
                    </div>
                </div>

Multi select in a row required

Multi select in a row required


                <div class="row">
                    <div class="col-md-6">
                        <turas-select-list asp-for="MultiSelectInARowRequiredOne" asp-items="MultiSelectInARowRequiredOnes" multiple live-search placeholder="Please select">  </turas-select-list>
                    </div>
                    <div class="col-md-6">
                        <turas-select-list asp-for="MultiSelectInARowRequiredTwo" asp-items="MultiSelectInARowRequiredTwos" multiple live-search placeholder="Please select">  </turas-select-list>
                    </div>
                </div>


                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group form-select-list "><label class="control-label requiredFieldMarker  " for="MultiSelectInARowRequiredOne">Multi select in a row required</label>
<div class="col">
<select class="form-control turas-select2" multiple="multiple" turas-select2-placeholder="Please select" turas-select2-close-on-select="false" turas-select2-live-search="true" data-val="true" data-val-required="The Multi select in a row required field is required." id="MultiSelectInARowRequiredOne" name="MultiSelectInARowRequiredOne"><option value="1">List item 1</option>
<option value="2">List item 2</option>
<option value="3">List item 3</option>
<option value="4">List item 4</option>
<option value="5">List item 5</option>
<option value="6">List item 6</option>
</select>
</div>
<span class="field-validation-valid" data-valmsg-for="MultiSelectInARowRequiredOne" data-valmsg-replace="true"></span>
</div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group form-select-list "><label class="control-label requiredFieldMarker  " for="MultiSelectInARowRequiredTwo">Multi select in a row required</label>
<div class="col">
<select class="form-control turas-select2" multiple="multiple" turas-select2-placeholder="Please select" turas-select2-close-on-select="false" turas-select2-live-search="true" data-val="true" data-val-required="The Multi select in a row required field is required." id="MultiSelectInARowRequiredTwo" name="MultiSelectInARowRequiredTwo"><option value="1">List item 1</option>
<option value="2">List item 2</option>
<option value="3">List item 3</option>
<option value="4">List item 4</option>
<option value="5">List item 5</option>
<option value="6">List item 6</option>
</select>
</div>
<span class="field-validation-valid" data-valmsg-for="MultiSelectInARowRequiredTwo" data-valmsg-replace="true"></span>
</div>
                    </div>
                </div>

Multi select hide validation message


                <turas-select-list asp-for="MultiSelectHideValidationMessage" asp-items="MultiSelectHideValidationMessages" multiple placeholder="Please select" hide-validation-message>  </turas-select-list>


                <div class="form-group form-select-list "><label class="control-label requiredFieldMarker  " for="MultiSelectHideValidationMessage">Multi select hide validation message</label>
<div class="col">
<select class="form-control turas-select2" multiple="multiple" turas-select2-placeholder="Please select" turas-select2-close-on-select="false" turas-select2-live-search="false" data-val="true" data-val-required="The Multi select hide validation message field is required." id="MultiSelectHideValidationMessage" name="MultiSelectHideValidationMessage"><option value="1">List item 1</option>
<option value="2">List item 2</option>
<option value="3">List item 3</option>
<option value="4">List item 4</option>
<option value="5">List item 5</option>
<option value="6">List item 6</option>
</select>
</div>

</div>

Multi select disabled


                <turas-select-list asp-for="MultiSelectDisabled" asp-items="MultiSelectsDisabled" multiple placeholder="Please select" asp-is-disabled="True">  </turas-select-list>


                <div class="form-group form-select-list "><label class="control-label   " for="MultiSelectDisabled">Multi select disabled</label>
<div class="col">
<select class="form-control turas-select2" multiple="multiple" turas-select2-placeholder="Please select" disabled="disabled" turas-select2-close-on-select="false" turas-select2-live-search="false" id="MultiSelectDisabled" name="MultiSelectDisabled"><option value="1">List item 1</option>
<option value="2">List item 2</option>
<option value="3">List item 3</option>
<option value="4">List item 4</option>
<option value="5">List item 5</option>
<option value="6">List item 6</option>
</select>
</div>
<span class="field-validation-valid" data-valmsg-for="MultiSelectDisabled" data-valmsg-replace="true"></span>
</div>

Mult select hide label


                <turas-select-list asp-for="MultiSelectHideLabel" asp-items="MultiSelectHideLabels" multiple placeholder="Please select" hide-label>  </turas-select-list>


                <div class="form-group form-select-list "><label class="control-label   sr-only" for="MultiSelectHideLabel">Multi select hide label</label>
<div class="col">
<select class="form-control turas-select2" multiple="multiple" turas-select2-placeholder="Please select" turas-select2-close-on-select="false" turas-select2-live-search="false" id="MultiSelectHideLabel" name="MultiSelectHideLabel"><option value="1">List item 1</option>
<option value="2">List item 2</option>
<option value="3">List item 3</option>
<option value="4">List item 4</option>
<option value="5">List item 5</option>
<option value="6">List item 6</option>
</select>
</div>
<span class="field-validation-valid" data-valmsg-for="MultiSelectHideLabel" data-valmsg-replace="true"></span>
</div>

Parameters for turas-select-list

asp-for - binds the select list to a model property
asp-items - specifies the items to be displayed in the select list
multiple - allows multiple selections in the select list
placeholder - provides a placeholder text when no item is selected
guidance-text - displays guidance text below the select list
live-search - enables a search feature within the select list
field-column-widths - sets the column width for the select list
additional-classes - adds custom CSS classes to the select list
hide-validation-message - hides validation messages for the select list
asp-is-disabled - disables the select list
hide-label - hides the label for the select list

Previous

Display

Next

Radio buttons

Was this page helpful?